<template>
    <div class="views-dianyingxinxi-web-detail">
        <div>
            <e-container>
                <div class="title-sn-title-shinei">
                    <div class="sn-title">

                        <span> 电影详情 </span>
                    </div>
                    <div class="sn-content">
                        <div class="">
                            <div class="goods-info clearfix">
                                <div class="gallery-list">
                                    <e-shangpinban :images="map.dianyinghaibao"></e-shangpinban>
                                </div>
                                <div class="goods-right-content">
                                    <h3 class="title" v-text="map.dianyingmingcheng"></h3>
                                    <div class="descount">
                                        <div>
                                            <span class="name"> 电影编号： </span>
                                            <span class="val"> {{ map.dianyingbianhao }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 分类： </span>
                                            <span class="val">
                                                <e-select-view module="dianyingfenlei" :value="map.fenlei" select="id" show="fenleimingcheng"></e-select-view>
                                            </span>
                                        </div>
                                        <div>
                                            <span class="name"> 电影类型： </span>
                                            <span class="val"> {{ map.dianyingleixing }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 影票价格： </span>
                                            <span class="val"> {{ map.yingpiaojiage }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 上映地区： </span>
                                            <span class="val"> {{ map.shangyingdiqu }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 导演： </span>
                                            <span class="val"> {{ map.daoyan }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 主演： </span>
                                            <span class="val"> {{ map.zhuyan }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 语言： </span>
                                            <span class="val"> {{ map.yuyan }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 年份： </span>
                                            <span class="val"> {{ map.nianfen }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 片长： </span>
                                            <span class="val"> {{ map.pianchang }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 是否上架： </span>
                                            <span class="val"> {{ map.shifoushangjia }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 评分： </span>
                                            <span class="val"> {{ map.pingfen }} </span>
                                        </div>
                                        <div>
                                            <span class="name"> 销售票数： </span>
                                            <span class="val"> {{ map.xiaoshoupiaoshu }} </span>
                                        </div>
                                    </div>

                                    <template v-if="$session.cx == '用户'">
                                        <el-button type="primary"   @click="$router.push('/dianyingpingjia/add?id='+map.id)">电影评价
                                        </el-button>
                                    </template>

                                    <el-badge :value="shoucangCount" style="margin-right: 15px">
                                        <el-button
                                            :type="is_shoucang ? 'danger' : 'primary'"
                                            @click="onShoucangChange"
                                            :icon="is_shoucang ? 'el-icon-star-filled' : 'el-icon-star'"
                                        >
                                            {{ is_shoucang ? '取消收藏' : '收藏' }}
                                        </el-button>
                                    </el-badge>
                                </div>
                            </div>
                            <div class="goods-content" v-html="map.dianyingxiangqing"></div>
                        </div>
                    </div>
                </div>
            </e-container>
        </div>
        <div>
            <e-container>
                <div class="title-sn-title-shinei">
                    <div class="sn-title">

                        <span> 排片 </span>
                    </div>
                    <div class="sn-content">
                        <div class="list-table">
                            <table width="100%" border="1" class="table table-list table-bordered table-hover">
                                <thead>
                                    <tr align="center">
                                        <th width="60" align="center">序号</th>
                                        <th>电影编号</th>
                                        <th>电影名称</th>
                                        <th>分类</th>
                                        <th>电影类型</th>
                                        <th>影票价格</th>
                                        <th>播放影院</th>
                                        <th>播放厅</th>
                                        <th>开场时间</th>
                                        <th>散场时间</th>
                                        <th>票数</th>
                                        <th>操作人</th>

                                        <th width="80" align="center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(r,i) in paipianlist">
                                        <td width="30" align="center">{{ i+1 }}</td>
                                        <td>{{ r.dianyingbianhao }}</td>
                                        <td>{{ r.dianyingmingcheng }}</td>
                                        <td><e-select-view module="dianyingfenlei" :value="r.fenlei" select="id" show="fenleimingcheng"></e-select-view></td>
                                        <td>{{ r.dianyingleixing }}</td>
                                        <td>{{ r.yingpiaojiage }}</td>
                                        <td>{{ r.bofangyingyuan }}</td>
                                        <td><e-select-view module="bofangting" :value="r.bofangting" select="id" show="bofangtingmingcheng"></e-select-view></td>
                                        <td>{{ r.kaichangshijian }}</td>
                                        <td>{{ r.sanchangshijian }}</td>
                                        <td>{{ r.piaoshu }}</td>
                                        <td>{{ r.paipianren }}</td>
                                        <td>
                                            <template v-if="$session.cx=='用户'">

                                                <el-button type="primary"   @click="$router.push('/goupiao/add?id='+r.id)">购买影票
                                                </el-button>

                                            </template>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </e-container>
        </div>
    </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";
    import EShangpinban from "@/components/shangpin/shangpinban.vue";

    import { ref, reactive, watch } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";
    import { extend } from "@/utils/extend";
    import { useDianyingxinxiFindById, canDianyingxinxiFindById, useDianyingxinxishoucang, canShoucangInsert, useShoucangCreateForm } from "@/module";

    const route = useRoute();

    // 获取详情页面的一行数据,当url参数id变更时，自动
    const map = useDianyingxinxiFindById(route.query.id);
    // 当url参数id变更时，自动更新map中的数据
    watch(
        () => route.query.id,
        (id) => {
            canDianyingxinxiFindById(id).then((res) => {
                extend(map, res);
            });
        }
    );
    // end 获取详情页面的一行数据
    // 获取当前收藏信息
    const { is_shoucang, shoucangCount } = useDianyingxinxishoucang(route.query.id);
    watch(
        () => route.query.id,
        (id) => {
            useDianyingxinxishoucang(id, is_shoucang, shoucangCount);
        },
        { immediate: true }
    );
    // end 获取当前收藏信息

    var shoucangForm = useShoucangCreateForm();
    const onShoucangChange = async () => {
        var f = shoucangForm.form;
        f.xwid = route.query.id;
        f.biao = "dianyingxinxi";
        f.biaoti = map.dianyingmingcheng;
        var s = await canShoucangInsert(f);
        useDianyingxinxishoucang(route.query.id, is_shoucang, shoucangCount);
    };


    // 定义响应式变量paipianlist
    const paipianlist = ref([]);
    const getpaipianlist = async () => {
        // 获取排片数据,并赋值给paipianlist变量
        paipianlist.value = await DB.name("paipian").where("dianyingxinxiid", map.id).limit("1000").order("yingpiaojiage asc").select();
    };
    // 监听map值变化后，并重新获取数据排片模块的数据
    watch(() => map, getpaipianlist, { immediate: true, deep: true });
</script>

<style scoped lang="scss">
    .views-dianyingxinxi-web-detail {
    }
</style>
